<template>
  <manageHead class="topbar"></manageHead>
  <div class="manager">
    <p class="title">个人中心</p>
    <el-container style="height: 800px; border: 1px solid #eee;">
      <el-aside width="200px" style="margin-top: 1%" >
        <div style="width: 190px;background-color: white;padding: 5px;margin: auto">
          <img :src="require('@/assets/img/user.jpg')" style="border-radius: 50%; width: 150px;height: 150px">
          <br>
          <br>
        </div>
        <br>
        <br>
        <el-menu>
          <el-sub-menu index="1">
            <template v-slot:title><el-icon><Avatar/></el-icon>用户中心</template>
            <el-menu-item-group>
              <router-link class="alink" to="/teacher/userInfo"><el-menu-item index="1-1">个人信息</el-menu-item></router-link>
              <router-link class="alink" to="/teacher/changeInfo"><el-menu-item index="1-3">修改信息</el-menu-item></router-link>
              <router-link class="alink" to="/teacher/changePwd"><el-menu-item index="1-2">修改密码</el-menu-item></router-link>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container style="background-color: white">
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Avatar} from '@element-plus/icons-vue'
import manageHead from "@/components/common/manageHead";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "teacherManager",
  components: {Avatar,manageHead},
  setup(){
    return{
    }
  }
}
</script>

<style scoped>
.manager {
  width: 980px;
  margin: 0 auto;
  background-color: white
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.alink{

  text-decoration: none;
}
.p{
  text-align: left;
}
.title {
  margin: 20px;
  text-align: center;
  font-size: 20px;
  color: #2CD9D9FF;
  display: flex;
  justify-content: center;
}
</style>